<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from 'echarts'
import resize from './mixins/resize'
export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    },
    chartData: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    chartData: {
      handler(val) {
        if (val.datas.length > 0) {
          this.$nextTick(() => {
            this.initChart()
          })
        }
      },
      deep: true
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.loading = true
      this.chart = echarts.init(this.$el, 'macarons')
      this.chart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: (p) => {
            return p.marker + p.name
          }
        },
        legend: {
          type: this.chartData.datas.length > 5 ? 'scroll' : '',
          icon: 'roundRect',
          itemHeight: 8,
          itemWidth: 12,
          textStyle: {
            fontSize: 13,
            color: '#666666'
          },
          top: 0,
          left: this.chartData.legendLeft || 0,
          y: 'top'
        },
        color: this.chartData.color || ['#434EB8', '#5F69E4', '#509AFD', '#71D5F8', '#14C8C7', '#FDB92C', '#FF8643', '#DB5A52'],
        series: [
          {
            name: '漏斗图',
            type: 'funnel',
            top: '15%',
            bottom: '5%',
            left: '20%',
            right: '20%',
            width: '60%',
            minSize: '40%',
            gap: 4,
            label: {
              normal: {
                show: true,
                position: 'inside',
                textStyle: {
                  fontSize: 12,
                  color: '#000000'
                },
                formatter: (params) => {
                  return this.moneyFormat(params.data.ratio) + '%'
                }
              }
            },

            data: this.chartData.datas
          },
          {
            type: 'funnel',
            top: '15%',
            bottom: '5%',
            left: '20%',
            right: '20%',
            width: '60%',
            minSize: '40%',
            gap: 4,
            z: 1,
            label: {
              show: true,
              formatter: function(params) {
                return params.data.name
              },
              color: '#8F919B',
              fontSize: 11,
              position: 'left'
            },
            data: this.chartData.datas,
            hoverAnimation: false
          },
          {
            type: 'funnel',
            top: '15%',
            bottom: '5%',
            left: '20%',
            right: '20%',
            width: '60%',
            minSize: '40%',
            gap: 4,
            z: 1,
            label: {
              show: true,
              formatter: function(params) {
                return '数量: ' + params.data.count
              },
              color: '#8F919B',
              fontSize: 11,
              position: 'right'
            },
            data: this.chartData.datas,
            hoverAnimation: false
          }
        ]
      })
      var that = this
      this.chart.on('click', function(params) {
        that.$emit('xData', params)
      })
    }
  }
}
</script>
